<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>

<body>
    <div style="width: 600px;height:400px;background: #05265C; "></div>
    <script>
        var mCharts = echarts.init(document.querySelector("div"))
        // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value

        option = {
            title: {
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                type: "plain"
            },

            graphic: [{
                type: 'text',
                top: '40%',
                left: '22%',
                style: {
                    text: '总共',
                    fill: '#2A4572',
                    fontSize: 16,
                    fontWeight: 'normal'
                }
            }, {
                type: 'text',
                top: '48%',
                left: '22%',
                style: {
                    text: '26',
                    fill: 'white',
                    fontSize: 30,
                    fontWeight: 'bold'
                }
            }],
            legend: {
                show: true,
                left: "80%",
                top: "40%",
                formatter: function (name) {
                    let data = [{
                            value: 4,
                            name: '一般'
                        },
                        {
                            value: 6,
                            name: '正常'
                        },
                        {
                            value: 7,
                            name: '严重'
                        },
                        {
                            value: 8,
                            name: '紧急'
                        }
                    ]
                    let tarValue = 0;
                    for (let i = 0, l = data.length; i < l; i++) {
                        tarValue = data[i].value;
                    }
                    let arr = [
                        name + '  ' + tarValue + '个'
                    ]
                    return arr.join('')
                },
                textStyle: {
                    color: "rgba(211, 32, 32, 1)"
                }

            },

            series: [{
                name: '半径模式',
                type: 'pie',
                radius: [80, 140],
                center: ['25%', '50%'],
                roseType: 'radius',
                itemStyle: {
                    borderRadius: 5
                },
                label: {
                    show: false
                },
                emphasis: {
                    label: {
                        show: true
                    }
                },

                data: [{
                        value: 4,
                        name: '一般'
                    },
                    {
                        value: 6,
                        name: '正常'
                    },
                    {
                        value: 7,
                        name: '严重'
                    },
                    {
                        value: 8,
                        name: '紧急'
                    }
                ]
            }]
        };

        mCharts.setOption(option)
    </script>
</body>

</html>